<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>余额</IHeader>
    </template>

    <view class="balance-page ">
      <!-- 余额核心区域 -->
      <view class="balance-core">
        <text class="balance-amount">{{ ammountData.totalAmount || 0 }}</text>
        <text class="balance-desc">账户余额（元）</text>
      </view>

      <!-- 提现按钮 -->
      <button class="withdraw-btn" @click="txFun">提现</button>

      <!-- 提现说明 -->
      <view class="withdraw-desc">
        提现说明：<br />
        订单结束后可随时提现，申请提现成功后，余额约0-5个
        <text class="workday-text">工作日</text>返回您的支付账户。
      </view>
    </view>

    <!-- 协议确认弹窗（若需要可保留，这里根据图片暂不展示弹窗内容） -->
    <uni-popup ref="popupRef" type="dialog">
      <!-- 弹窗内容可根据实际需求补充，此处暂略 -->
    </uni-popup>

    <template #footer>
      <ITabBar :index="2" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts">
  import { onMounted, ref, computed, nextTick } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import ITabBar from '@/components/container/ITabBar.vue'
  import useToastMsg from '@/hooks/sysMsg'
  import useUserInfoStore from '@/store/userInfo'
  import { getRentLedger, getTotalAmount } from '@/api/balance'
  import useAccountStore from '@/store/account'
  import { withdrawal } from '@/api'
  const priceValue = ref('0')
  const toastMsg = useToastMsg()
  const userInfoStore = useUserInfoStore()
  const accountStore = useAccountStore()
  const ammountData = ref<any>({
    totalAmount: 0,
    dataList: [],
  })
  const activeStatus = ref('2')

  onMounted(async () => init())
  const init = () => {
    Promise.all([selectAmountTotalFun()])
  }
  const selectAmountTotalFun = async () => {
    const result = await getTotalAmount({
      wxId: userInfoStore.getUserInfo.userId,
      wdId: accountStore.getAccountDetails.wdId,
    })
    if (result) {
      ammountData.value.totalAmount = result.data.totalAmount || 0
    }
  }
  const txFun = async () => {
    if (ammountData.value.totalAmount) {
      toastMsg.showLoading()
      const result = await withdrawal(userInfoStore.getUserInfo.userId, priceValue.value || '')
      if (result) {
        toastMsg.showToast('提现成功')
        init()
      }
    } else {
      toastMsg.showToast('暂无提现金额')
    }
  }
</script>

<style lang="scss" scoped>
  .balance-page {
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .balance-core {
    text-align: center;
    margin-bottom: 60rpx;
    height: 30%;
  }

  .balance-amount {
    font-size: 80rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
  }

  .balance-desc {
    font-size: 30rpx;
    color: #999;
  }

  .withdraw-btn {
    width: 100%;
    background-color: #007aff;
    color: #fff;
    border-radius: 8rpx;
    padding: 10rpx 0;
    font-size: 36rpx;
    margin-bottom: 40rpx;
  }

  .withdraw-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    text-align: left;
    width: 100%;
  }

  .workday-text {
    color: #007aff;
  }
</style>